<template>
    <div class="login-page">
        <div class="layer bg" id="login"></div>
        <div class="layer flex-center">
            <!-- logo部分 -->
            <div class="logo-group">
                <img src="./image/logo.png" alt="logo">
            </div>
            <!-- 表单部分 -->
            <div class="form-group">
                <el-card>
                    <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
                        <el-form-item prop="username">
                            <el-input type="text" v-model="formLogin.username" placeholder="用户名">
                                <i slot="prepend" class="fa fa-user-circle-o"></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" v-model="formLogin.password" placeholder="密码">
                                <i slot="prepend" class="fa fa-keyboard-o"></i>
                            </el-input>
                        </el-form-item>
                        <!--<el-form-item prop="code">-->
                        <!--<el-input type="text" v-model="formLogin.code" placeholder="- - - -">-->
                        <!--<template slot="prepend">验证码</template>-->
                        <!--<template slot="append">-->
                        <!--<img class="login-code" src="./image/login-code.png">-->
                        <!--</template>-->
                        <!--</el-input>-->
                        <!--</el-form-item>-->
                        <el-form-item prop="validate">
                            <div id="captcha" class="captcha">
                                <div class="text" id="text" v-if="waiting">
                                    行为验证™ 安全组件加载中
                                </div>
                            </div>
                        </el-form-item>
                        <el-button size="default" @click="submit" type="primary" class="button-login">登录</el-button>
                    </el-form>
                </el-card>
            </div>
            <!-- 快速登录按钮 -->
            <el-button size="default" type="info" class="button-help" @click="dialogVisible = true">
                快速选择用户（测试功能）
            </el-button>
        </div>
        <el-dialog
                title="快速选择用户"
                :visible.sync="dialogVisible"
                width="400px">
            <el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
                <el-col v-for="(user, index) in users" :key="index" :span="8">
                    <div class="user-btn" @click="handleUserBtnClick(user)">
                        <d2-icon name="user-circle-o"/>
                        <span>{{user.name}}</span>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    /* eslint-disable */
    // require('particles.js')
    import {captcha} from '@/api/sys/login'

    import {mapActions} from 'vuex'

    export default {
        data() {
            return {
                // 快速选择用户
                dialogVisible: false,
                captchaObj: null,
                waiting: true,
                users: [
                    {
                        name: '管理员',
                        username: 'admin',
                        password: 'admin'
                    },
                    {
                        name: '编辑',
                        username: 'editor',
                        password: 'editor'
                    },
                    {
                        name: '用户1',
                        username: 'user1',
                        password: 'user1'
                    }
                ],
                // 表单
                formLogin: {
                    username: '',
                    password: '',
                    validate: ''
                },
                // 校验
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    validate: [
                        {required: true, message: '请通过验证', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            // 初始化例子插件
            // particlesJS('login', config)
            this.setupGeetest()
        },
        beforeDestroy() {
            // 销毁 particlesJS
            // thanks https://github.com/d2-projects/d2-admin/issues/65
            // ref https://github.com/VincentGarreau/particles.js/issues/63
            // if (pJSDom && pJSDom.length > 0) {
            //     pJSDom[0].pJS.fn.vendors.destroypJS()
            //     pJSDom = []
            // }
        },
        methods: {
            ...mapActions('d2admin/account', [
                'login'
            ]),

            setupGeetest() {
                let self = this
                captcha().then(data => {
                    console.log(data)
                    window.initGeetest({
                        // 以下配置参数来自服务端 SDK
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success,
                        new_captcha: true,
                        product: "float", // 产品形式，包括：float，popup
                        width: "358px"

                    }, (captchaObj) => {
                        // 这里可以调用验证实例 captchaObj 的实例方法
                        captchaObj.appendTo('#captcha');
                        self.captchaObj = captchaObj
                        captchaObj.onReady(() => {
                            self.waiting = false
                        });
                        captchaObj.onSuccess(() => {
                            self.formLogin.validate = captchaObj.getValidate();
                        })

                    })
                }).catch(error => {

                })
            },
            /**
             * @description 接收选择一个用户快速登录的事件
             * @param {Object} user 用户信息
             */
            handleUserBtnClick(user) {
                this.formLogin.username = user.username
                this.formLogin.password = user.password
                this.submit()
            },

            resetGeetest(){
                this.captchaObj.reset();
                this.formLogin.validate = null
            },
            /**
             * @description 提交表单
             */
            // 提交登录信息
            submit() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        // 登录
                        // 注意 这里的演示没有传验证码
                        // 具体需要传递的数据请自行修改代码
                        this.login({
                            vm: this,
                            username: this.formLogin.username,
                            password: this.formLogin.password,
                            validate:this.formLogin.validate
                        })
                    } else {
                       this.resetGeetest();
                        // 登录表单校验失败
                        // this.$message.error('表单校验失败')
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    @import './style.scss';

    .captcha {
        display: block;
        .text {
            height: 42px;
            text-align: center;
            border-radius: 2px;
            background-color: #F3F3F3;
            color: #BBBBBB;
            font-size: 14px;
            letter-spacing: 0.1px;
            line-height: 42px;
        }
    }

    .geetest_radar_btn {
        border-color: #e0e0e0;
    }

</style>
